VUE 中添加 wangEditor3 组件

这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
• 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
• 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

• 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
• 保留了 1 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。
• 涉及环境变量的示例只保留命名和加载方式，真实密钥、token 和本地配置应放在未提交的本地文件或 CI 密钥变量中。

// index.js
import Wangeditor from './Wangeditor.vue'
export default Wangeditor

// index.less  // 加载公共
@import "../index";


// Wangeditor.vue
<template>
  <div class="wangeditor">
    <div ref="editorElem" class="wangeditor-mach"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { postUpload } from '@/api/upload'
import defaultSettings from '@/config/defaultSettings'
export default {
  name: 'Wangeditor',
  data () {
    return {
      editor: {},
      editorContent: '',
      defaultSettings: defaultSettings.settings,
      path: '',
      imgServerUrl: process.env.VUE_APP_SERVER_URL // 图片地址服务器 (因返回的地址为相对地址)
    }
  },
  watch: {
    context (val, oldval) {
      if (val && val !== oldval) {
        this.handsetHtmlValue(val)
      }
    }
  },
  props: {
    // eslint-disable-next-line
    editorData: {
      type: Function,
      default: (value) => {
        return value
      }
    },
    // eslint-disable-next-line
    editorConfig: {
      // eslint-disable-next-line
      type: Object,
      // eslint-disable-next-line
      default: {
        uploadImgServer: '',
        uploadFileName: 'file',
        uploadImgMaxLength: 1,
        zIndex: 9
      }
    },
    context: {
      type: String,
      default: ''
    }
  },
  mounted () {
    const that = this
    const editor = new E(this.$refs.editorElem) // 创建富文本实例
    this.editor = editor
    editor.customConfig.onchange = (html) => {
      // 把这个html通过editorData的方法传入父组件
      this.editorData(html)
    }
    editor.customConfig.zIndex = this.editorConfig.zIndex || 9
    editor.customConfig.uploadFileName = this.editorConfig.uploadFileName
    editor.customConfig.uploadImgMaxLength = this.editorConfig.uploadImgMaxLength
    editor.customConfig.uploadImgServer = this.editorConfig.uploadImgServer
    console.log('图片上传地址：', editor.customConfig.uploadImgServer, this.imgServerUrl)
    // editor.customConfig.menus = [ // 菜单配置
    //   'head',
    //   'list', // 列表
    //   'justify', // 对齐方式
    //   'bold',
    //   'fontSize', // 字号
    //   'italic',
    //   'underline',
    //   'image', // 插入图片
    //   'foreColor', // 文字颜色
    //   'undo', // 撤销
    //   'redo' // 重复
    // ]
    // 下面是最重要的的方法
    // editor.customConfig.uploadImgHooks = {
    //   before (xhr, editor, files) {
    //     // 图片上传之前触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
    //     // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
    //     // return {
    //     //     prevent: true,
    //     //     msg: '放弃上传'
    //     // }
    //   },
    //   success (xhr, editor, result) {
    //     // 图片上传并返回结果，图片插入成功之后触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //     this.imgUrl = Object.values(result.data).toString()
    //   },
    //   fail (xhr, editor, result) {
    //     // 图片上传并返回结果，但图片插入错误时触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //   },
    //   error (xhr, editor) {
    //     // 图片上传出错时触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //   },
    //   timeout (xhr, editor) {
    //     // 图片上传超时时触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //   },

    //   // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    //   // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    //   customInsert (insertImg, result, editor) {
    //     // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
    //     // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

    //     // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
    //     console.log('图片上传并返回结果，自定义插入图片的事件', insertImg, result, editor)
    //     if (result.status !== 'success') { return this.$message.error(`富文本编辑器图片上传失败！`) }
    //     this.path = result.path
    //     const resultData = result.data.split(',')
    //     const wangeditorData = resultData.forEach(item => insertImg(result.path + item))
    //     console.log(wangeditorData)
    //   }
    // }
    editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法

      // 上传代码返回结果之后，将图片插入到编辑器中 注意：！！！ 此处只涉及单张图片
      const fileList = [...files]
      const formData = new FormData()
      fileList.forEach(file => {
        formData.append('file', file)
      })
      postUpload(formData).then(res => {
        if (res.status !== 'success') {
          return that.$message.error(res.msg)
        }
        console.log('自定义上传方法：', that.imgServerUrl + res.result)
        insert(that.imgServerUrl + res.result)
      }).catch(e => { })
    }
    editor.create()
  },
  methods: {
    handsetHtmlValue (data) {
      this.editor.txt.html(data)
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .wangeditor-mach .w-e-toolbar {
    flex-wrap: wrap;
  }
</style>

// 父及组件使用方法
import wangeditor from '@/components/Wangeditor'
import xss from 'xss'

export default {
    components: {
        'a-wangeditor': wangeditor
    },
    data () {
        return {
            editorContent: '',
              context: '',
              editorConfig: {
                uploadImgServer: postUploadUrl()
              }
        }  
    },
    methods: {
        editorData (data) {
          this.editorContent = xss(data)
          // 赋值操作
          this.handsetFieldsValue('context', this.editorContent)
        }
    }
}

实践检查清单 ​

• 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
• 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
• 不要把真实 token、密码、私钥或本地 .env.local 提交到仓库。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。
• 涉及接口、服务端或权限逻辑时，补充失败分支和权限边界测试。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。